<template>
	<view class="im_interface">
		<scroll-view id="scrollview" scroll-y="true" :style="'height: ' + scrollviewHigh + 'px'"
			:scroll-with-animation="true" :scroll-top="scrollTop" @scrolltoupper='newdata'>

			<view class="im_interface_content" ref='container'>
				<view :class="item.sendType == 1 ? 'im_text' : 'im_text2'" class="m-item"
					v-for="(item, index) in content_list" :key="index">
					<image v-if="item.type != 'product' && item.type != 'order'" class="avatar"
						:src="item.sendType == 1 ? myavatarUrl : avatarUrl" mode=""></image>
					<view>
						<view class="my_date">{{ item.createTime }}</view>
						<view v-if="item.msgType == 0"
							:class="item.sendType == 1 ? 'my_content my_text_content' : 'you_content you_text_content'">
							{{ item.content }}
						</view>
						<view v-if="item.msgType == 1" :class="item.sendType == 1 ? 'my_content' : 'you_content'">
							<image @click="preview(item.content, 0)" class="cont_img" :src="item.content" mode="">
							</image>
						</view>
						<view v-if="item.msgType == 2" :class="item.sendType == 1 ? 'my_content' : 'you_content'">
							<view class="product_txtitem">
								<view>
									<image class="pro_img" :src="item.content.productImg" mode=""></image>
								</view>
								<view>
									<view class="pro_txtname">{{ item.content.productName }}</view>
									<view class="pro_price">HK${{ item.content.productPrice }}</view>
								</view>
							</view>
						</view>
						<view v-if="item.msgType == 3" :class="item.sendType == 1 ? 'my_content' : 'you_content'">
							<view class="o-h">
								<view class="fb mb20">
									{{ $t('user.consulting_order') }}
								</view>
								<view class="product_txtitem mb20">
									<view>
										<image class="pro_img" :src="item.content.productImg" mode=""></image>
									</view>
									<view>
										<view class="pro_txtname">{{ item.content.productName }}</view>
										<view class="f24 gray6">
											{{ $t('plus.total_items', { place: item.content.orderNum }) }}
											HK${{ item.content.orderPrice }}
										</view>
									</view>
								</view>
								<view class="f24 gray6 ">{{ $t('user.order_number0', { place1: item.content.orderNo }) }}
								</view>
								<view class="f24 gray6 ">{{ $t('user.creation_time', { place1: item.content.createTime }) }}
								</view>
								<button class="orderdetail_btn"
									@click="gotoPage('/pages/order/order-detail?orderId=' + item.content.orderId)">{{ $t('user.view') }}</button>
							</view>
						</view>
						<view v-if="item.type == 'product'">
							<view class="top_pro">
								<view class="top_product" v-if="is_product">
									<view>
										<image class="pro_img" :src="productDetail.image[0].filePath" mode=""></image>
									</view>
									<view>
										<view class="pro_name">{{ productDetail.productName }}</view>
										<view class="pro_price sendpro_price">HK${{ productDetail.productPrice }}</view>
									</view>
									<button class="pro_btn"
										@click="sendProduct">{{ $t('user.send_to_merchant') }}</button>
									<view class="close_pro" @click="is_product = false"><text
											class="icon iconfont icon-guanbi"></text></view>
								</view>
							</view>
						</view>
						<view v-if="item.type == 'order'">
							<view class="top_pro">
								<view class="top_order" v-if="is_order">
									<view>
										<image class="pro_img" :src="order_chat.product[0].productImage" mode="">
										</image>
									</view>
									<view>
										<view class="pro_name mb20">{{ $t('user.possible_consult') }}</view>
										<view class="f24 gray6 sendord_price">
											{{ t('plus.total', { place1: order_chat.product.length }) }}
											{{ t('plus.total_amount') }} HK${{ order_chat.orderPrice }}
										</view>
									</view>
									<button class="ord_btn" @click="sendOrder">{{ $t('user.send_order') }}</button>
									<view class="close_pro" @click="is_order = false"><text
											class="icon iconfont icon-guanbi"></text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 130rpx;"></view>
		</scroll-view>

		<view class="buttom" :style="'bottom:' + inputBottom + 'px;'">
			<view class="icon iconfont icon-tupian" @click="upload('license')"></view>
			<input type="text" v-model="content" @confirm="send_content()" confirm-type="send" @focus="inputFocus"
				@blur="inputBlur" :adjust-position="false" :placeholder="$t('user.please_enter') + '.....'" />
			<button @click="send_content()">{{ $t('user.send') }}</button>
		</view>

		<Upload v-if="isupload" :isupload="isupload" :type="type" @getImgs="getImgsFunc">{{ $t('user.upload_image') }}
		</Upload>
	</view>
</template>

<script>
import Upload from '@/components/upload/upload';
export default {
	data() {
		return {
			myUserId: '', //我的user_id
			youUserId: '', //对方的service_user_id
			myavatarUrl: '',
			avatarUrl: '',
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			content: '', //用户输入的内容
			content_list: [], //聊天信息数据
			style: {
				pageHeight: 0,
				contentViewHeight: 0,
				footViewHeight: 90,
				mitemHeight: 0
			},
			isupload: false,
			type: 'license',
			scrollTop: 0,
			imgPath: '',
			is_product: false,
			productId: 0,
			productDetail: {},
			socketTask: null,
			// 确保websocket是打开状态
			is_open_socket: false,
			// 心跳定时器
			intervalId: null,
			page: 1,
			nomore: false,
			scrollHeight: 0,
			nickName: '',
			url: '',
			status: this.$t('user.offline'),
			/* 初次进入 */
			is_live: false,
			inputBottom: 0,
			is_Ios: true,
			order_chat: {},
			isOrder: false
		}
	},
	components: {
		/*编辑组件*/
		Upload
	},
	created() {
		let self = this;
		const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
		this.style.pageHeight = res.windowHeight;
		this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素
	},
	onShow() {
		this.getAvatarUrl();
		this.init();
		this.isuserAgent();
	
	},
	onLoad(option) {
		let self = this;
		self.youUserId = option.userId;
		self.myUserId = option.serviceUserId;
		self.shopSupplierId = option.shopSupplierId;
		self.productId = option.productId ? option.productId : 0;
		if (self.productId != 0) {
			self.getProduct()
		}
		self.orderId = option.orderId ? option.orderId : 0;
		console.log(self.orderId)
		if (self.orderId != 0) {
			self.getOrder()
		}
		self.nickName = option.nickName;
		uni.setNavigationBarTitle({
			title: self.nickName + '(offline)'
		})
		self.get_content_list();
	},
	beforeUnmount() {
		console.log('beforeUnmount');
		// 销毁监听
		this.closeSocket();
		this.is_live = true;
	},
	methods: {
		/*初始化*/
		init() {
			let self = this;
			uni.getSystemInfo({
				success(res) {
					self.phoneHeight = res.windowHeight;
					// 计算组件的高度
					self.scrollviewHigh = self.phoneHeight;
				}
			});
		},
		initData() {
			this.page++;
			this.get_content_list();
		},
		socketInit() {
			let self = this;
			if (self.is_open_socket) {
				return;
			}
			self.socketTask = null;
			self.socketTask = uni.connectSocket({
				url: self.url + '/socket?userId=' + self.myUserId + '&usertype=service',
				success() {
					console.log('Socket连接成功！');
				}
			});
			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			self.socketTask.onOpen((res) => {
				console.log("WebSocket连接正常打开中...！");
				self.is_open_socket = true;
				// 开始发送心跳,false马上查询在线状态
				self.startHeart(false);
				self.startHeart(true);
				// 注：只有连接正常打开中 ，才能正常收到消息
				self.socketTask.onMessage(function (res) {
					console.log("收到服务器内容：");
					console.log(res);
					self.getNewcontent(res);
				});
			});
			// 这里仅是事件监听【如果socket关闭了会执行】
			self.socketTask.onClose(() => {
				console.log("已经被关闭了");
				//重连机制
				if (!self.is_live) {
					self.socketTask = null;
					self.is_open_socket = false;
					clearInterval(self.intervalId);
					!self.is_live && self.socketInit();
				}
			});
		},
		send: function (data) {
			let self = this;
			if (self.is_open_socket) {
				self.socketTask.send({
					data: data,
					success() {

					}
				});
			} else {
				console.log("处于离线状态");
				self.socketTask = null;
				self.is_open_socket = false;
				clearInterval(self.intervalId);
				self.socketInit();
			}
		},
		startHeart(isLoop) {
			let self = this;
			let data = JSON.stringify({
				type: 'ping',
				to: self.youUserId,
				from: self.myUserId,
				sendType: 1
			});
			if (isLoop) {
				self.intervalId = setInterval(function () {
					console.log('发送心跳');
					self.send(data);
				}, 10000);
			} else {
				console.log('发送心跳');
				self.send(data);
			}
		},
		closeSocket: function () {
			let self = this;
			let data = JSON.stringify({
				type: 'close',
				appId: self.getAppId(),
				serviceUserId: self.youUserId,
				userId: self.myUserId,
				shopSupplierId: self.shopSupplierId,
				msgType: 2,
			});
			self.send(data);
			self.socketTask.close({
				success(res) {
					console.log("关闭成功", res)
				},
				fail(err) {
					console.log("关闭失败", err)
				}
			});
			self.socketTask = null;
			self.is_open_socket = false;
			clearInterval(self.intervalId);
		},
		// 发送消息
		send_content() {
			if (this.content == '') {
				uni.showToast({
					title: this.$t('user.send_content_required'),
					icon: 'none'
				})
				return false
			}
			let self = this;
			let data = JSON.stringify({
				to: this.youUserId,
				from: this.myUserId,
				sendType: 1,
				type: 'msg',
				msgType: 0,
				content: this.content
			})
			let newdata = JSON.parse(data)
			let item = {
				sendType: 1,
				content: newdata.content,
				type: newdata.type,
				msgType: 0,
				createTime: self.formatDate(),
				avatarUrl: self.myavatarUrl
			}
			this.content_list = [...this.content_list, item];
			this.$nextTick(function () {
				this.scrollToBottom()
			});
			self.send(data);
			self.content = '';
		},
		getNewcontent(res) {
			let newdata = JSON.parse(res.data);
			console.log(newdata);
			if (newdata.online == 'off' && !this.is_live) {
				this.status = this.$t('user.offline');
				console.log("对方离线")
				uni.setNavigationBarTitle({
					title: this.nickName + '(离线)'
				})
			}
			if (newdata.online == 'on' && !this.is_live) {
				this.status = this.$t('user.online');
				console.log("对方在线")
				uni.setNavigationBarTitle({
					title: this.nickName + '(在线)'
				})
			}
			console.log(newdata)
			if (newdata.userId == this.youUserId && newdata.content) {
				if (newdata.contentJson) {
					newdata.content = newdata.contentJson;
				}
				let item = {
					content: newdata.content,
					userId: newdata.userId,
					type: newdata.type,
					msgType: newdata.msgType,
					sendType: 2,
					createTime: this.formatDate(),
				}
				console.log("解析数据");
				this.content_list = [...this.content_list, item];
				this.$nextTick(function () {
					this.scrollToBottom()
				})
			}
		},
		getProduct() {
			let self = this;
			self._get(
				'product/product/detail', {
				productId: self.productId,
				url: '',
				visitcode: self.getVisitcode()
			},
				function (res) {
					self.is_product = true;
					self.content_list = [...self.content_list, {
						type: 'product'
					}];
					self.productDetail = res.data.detail;
				}
			);
		},
		getOrder() {
			let self = this;
			self._get(
				'user/order/detail', {
				orderId: self.orderId
			},
				function (res) {
					self.is_order = true;
					self.content_list = [...self.content_list, {
						type: 'order'
					}];
					self.order_chat = res.data.detail;
				}
			);
		},
		upload(e) {
			this.type = e;
			this.isupload = true;
		},
		getAvatarUrl() {
			let self = this;
			//self.myUserId = uni.getStorageSync('userId')
			self._get(
				'plus/chat/chat/getInfo', {
				shopSupplierId: self.shopSupplierId,
				userId: self.youUserId,
				serviceUserId: self.myUserId
			},
				function (res) {
					self.avatarUrl = res.data.logo;
					self.myavatarUrl = res.data.avatarUrl;
					self.url = res.data.url;
					self.$nextTick(function () {
						self.socketInit();
					});
				}
			);
		},
		getImgsFunc(e) {
			let self = this;
			console.log(e);
			if (e != null && e.length > 0) {
				self.imgPath = e[0].filePath;
				let data = JSON.stringify({
					to: self.youUserId,
					from: self.myUserId,
					sendType: 1,
					type: 'msg',
					msgType: 1,
					content: self.imgPath
				})
				let newdata = JSON.parse(data)
				let item = {
					sendType: 1,
					content: newdata.content,
					type: 'msg',
					msgType: 1,
					createTime: self.formatDate(),
					avatarUrl: self.myavatarUrl
				}
				self.content_list = [...self.content_list, item];
				self.send(data)
				self.$nextTick(function () {
					self.scrollToBottom()
				})
			}
			self.isupload = false;
		},
		//获取聊天记录
		get_content_list() {
			let self = this;
			uni.showLoading({
				title: this.$t('user.loading')
			})
			self._postBody('plus/chat/chat/record', {
				pageIndex: self.page,
				pageSize: 15,
				userId: self.youUserId,
				serviceUserId: self.myUserId,
			}, (res) => {
				console.log(self.content_list)
				for (let i = 0; i < res.data.records.length; i++) {
					if (res.data.records[i].contentJson) {
						res.data.records[i].content = res.data.records[i].contentJson;
					}
				}
				let list = res.data.records.reverse();
				self.content_list = [...list, ...self.content_list];
				if (res.data.lastPage <= self.page) {
					self.nomore = true;
				}
				if (self.page == 1) {
					self.$nextTick(() => {
						self.scrollToBottom();
					});
				} else {
					self.$nextTick(() => {
						const newquery = uni.createSelectorQuery().in(self);
						newquery.select('.im_interface_content').boundingClientRect(data => {
							console.log(data)
							self.scrollTop = data.height - self.scrollHeight;
						}).exec();
					});
				}
				uni.hideLoading()
			})
		},
		//打开图片预览
		preview(e, index) {
			let self = this;
			let image_path_arr = [];
			let image_path_list = e;
			image_path_arr.push(image_path_list)
			let picnum = index * 1;
			uni.previewImage({
				urls: image_path_arr,
				current: picnum,
				indicator: 'default',
			});
		},
		scrollToBottom: function () {
			let self = this;
			let query = uni.createSelectorQuery();
			query.selectAll('.m-item').boundingClientRect();
			query.select('#scrollview').boundingClientRect();
			query.exec((res) => {
				self.style.mitemHeight = 0;
				res[0].forEach((rect) => self.style.mitemHeight = self.style.mitemHeight + rect.height +
					40)
				setTimeout(() => {
					if (self.style.mitemHeight > (self.style.contentViewHeight - 100)) {
						self.scrollTop = self.style.mitemHeight - self.style.contentViewHeight +
							150
					}
				}, 300)
			})
		},
		sendProduct() {
			let self = this;
			self.is_product = false;
			let params = {
				productName: self.productDetail.productName,
				productImg: self.productDetail.image[0].filePath,
				productPrice: self.productDetail.productPrice
			}
			let data = JSON.stringify({
				to: this.youUserId,
				from: this.myUserId,
				sendType: 1,
				type: 'msg',
				msgType: 2,
				content: params
			})
			let newdata = JSON.parse(data)
			let item = {
				sendType: 1,
				content: newdata.content,
				type: newdata.type,
				msgType: 2,
				createTime: self.formatDate(),
				avatarUrl: self.myavatarUrl
			}
			this.content_list = [...this.content_list, item];
			self.send(data)
			self.$nextTick(function () {
				self.scrollToBottom()
			})
		},
		sendOrder() {
			let self = this;
			self.is_order = false;
			let params = {
				orderNum: self.order_chat.product.length,
				orderPrice: self.order_chat.orderPrice,
				orderNo: self.order_chat.orderNo,
				createTime: self.order_chat.createTime,
				orderId: self.order_chat.orderId,
				productName: self.order_chat.product[0].productName,
				productImg: self.order_chat.product[0].productImage,
			}
			let data = JSON.stringify({
				to: self.youUserId,
				from: self.myUserId,
				sendType: 1,
				type: 'msg',
				msgType: 3,
				content: params
			})
			let newdata = JSON.parse(data)
			let item = {
				sendType: 1,
				content: newdata.content,
				type: newdata.type,
				msgType: 3,
				createTime: self.formatDate(),
				avatarUrl: self.myavatarUrl
			}
			console.log(item);
			self.content_list = [...self.content_list, item];
			self.send(data)
			self.$nextTick(function () {
				self.scrollToBottom()
			})
		},
		getJSON(str) {
			return JSON.parse(str)
		},
		newdata() {
			let self = this;
			this.page++;
			const query = uni.createSelectorQuery().in(this);
			query.select('.im_interface_content').boundingClientRect(data => {
				this.scrollHeight = data.height;
			}).exec();
			this.get_content_list();
		},
		inputFocus(e) {
			this.inputBottom = e.detail.height;
		},
		inputBlur() {
			this.inputBottom = 0;
		},
		isuserAgent() {
			let self = this;
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					self.is_Ios = false;
					console.log('运行Android上')
					break;
				case 'ios':
					console.log('运行iOS上')
					break;
				default:
					console.log('运行在开发者工具上')
					break;
			}
		},
		formatDate() {
			let date = new Date();
			let year = date.getFullYear(); // 年
			let month = date.getMonth() + 1; // 月
			let day = date.getDate(); // 日
			let week = date.getDay(); // 星期
			let weekArr = [this.$t('user.sunday'), this.$t('user.monday'), this.$t('user.tuesday'), this.$t('user.wednesday'), this.$t('user.thursday'), this.$t('user.friday'), this.$t('user.saturday')];
			let hour = date.getHours(); // 时
			hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
			let minute = date.getMinutes(); // 分
			minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
			let second = date.getSeconds(); // 秒
			second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
		},
	}
}
</script>

<style lang="scss" scoped>
.store_info {
	background: #FFFFFF;
	height: 56rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 30rpx;
	color: #333333;
	padding: 50rpx 20rpx;
	box-sizing: border-box;

	.store_l {
		display: flex;
		align-items: center;
	}

	.img {
		width: 44rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}

	.store_btn {
		width: 118rpx;
		height: 56rpx;
		line-height: 56rpx;
		border: 1rpx solid #F25539;
		border-radius: 28rpx;
		font-size: 28rpx;
		text-align: center;
		color: #F25539;
	}
}

page {
	background-color: #EDEDED;
}

.im_interface {
	width: 750rpx;
}

.im_interface_content {
	padding: 20rpx 50rpx;
}

.buttom {
	width: 750rpx;
	height: 130rpx;
	background-color: #F7F7F7;
	border-top: 1px #D2D2D2 solid;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	position: fixed;
	bottom: 0;
	box-sizing: border-box;
	align-items: center;
	padding: 0 10rpx;

	.icon {
		font-size: 47rpx;
	}

	uni-input {
		margin: 0 20rpx !important;

	}

	uni-button {
		margin: 0 !important;
	}
}

.buttom input {
	width: 605rpx;
	height: 65rpx;
	line-height: 65rpx;
	background-color: white;
	display: block;
	padding: 5rpx;
	box-sizing: border-box;
	margin-left: 30rpx;
	border-radius: 10rpx;
	vertical-align: middle;
	position: relative;
	border: 1rpx solid #CCCCCC;

}

.buttom button {
	width: 110rpx;
	height: 65rpx;
	line-height: 65rpx;
	display: block;
	vertical-align: middle;
	position: relative;
	background: linear-gradient(45deg, #F2473F, #F26E2F);
	border-radius: 30rpx;
	color: white;
	font-size: 24rpx;
}

.im_text {
	/* width: 100%; */
	display: flex;
	margin-top: 75rpx;
	flex-direction: row-reverse;
	position: relative;
}

.im_text2 {
	/* width: 100%; */
	display: flex;
	margin-top: 75rpx;
	position: relative;
}

.im_text .avatar {
	width: 84rpx;
	height: 84rpx;
	margin-left: 3%;
	border-radius: 50%;
	overflow: hidden;
	background-color: #FFFFFF;
	align-items: flex-start;
}

.im_text2 .avatar {
	width: 84rpx;
	height: 84rpx;
	margin-right: 3%;
	border-radius: 50%;
	background-color: #fff;
	align-items: flex-start;
}

.im_text .my_content {
	max-width: 550rpx;
	align-items: flex-start;
	border-radius: 10rpx;
	padding: 17rpx 20rpx;
	box-sizing: border-box;
	word-break: break-all;
}

.im_text2 .my_content {
	max-width: 450rpx;
	align-items: flex-start;
	border-radius: 10rpx;
	padding: 17rpx 20rpx;
	box-sizing: border-box;
	word-break: break-all;
}

.im_text .you_content {
	max-width: 450rpx;
	align-items: flex-start;
	border-radius: 10rpx;
	padding: 17rpx 20rpx;
	box-sizing: border-box;
}

.im_text2 .you_content {
	max-width: 450rpx;
	align-items: flex-start;
	border-radius: 25rpx 25rpx 25rpx 0rpx;
	box-sizing: border-box;
	font-size: 24rpx;
	padding: 17rpx 20rpx;
}

.my_content {
	background: #FFFFFF;
	color: #333;
	margin-top: 25rpx;
	border-radius: 20rpx 0px 20rpx 20rpx;
}

.you_content {
	background-color: white;
	margin-top: 25rpx;
}

.im_icon {
	position: absolute;
	bottom: -2rpx;
	right: 41px;
	transform: rotate(270deg);

}

.im_icon2 {
	position: absolute;
	bottom: 0;
}

.im_icon .icon-sanjiao1 {
	color: #9EEA6A;
}

.im_icon2 .icon-sanjiao1 {
	position: absolute;
	bottom: 0;
}

.upload {
	width: 50rpx;
	height: 50rpx;
	background-color: #007AFF;
	border-radius: 50%;
	line-height: 50rpx;
	text-align: center;
}

.cont_img {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
}

.top_pro {
	/* margin-left: 85rpx; */
}

.top_product {
	width: 610rpx;
	height: 152rpx;
	border-radius: 10rpx;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: #FFFFFF;
	padding: 10rpx 20rpx;
	position: relative;
}

.top_order {
	width: 610rpx;
	/* height: 200rpx; */
	border-radius: 10rpx;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: #FFFFFF;
	padding: 10rpx 20rpx;
	position: relative;
}

.pro_img {
	height: 150rpx;
	width: 150rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
	background-color: #FFFFFF;
}

.pro_name {
	font-size: 26rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	margin-bottom: 40rpx;
	width: 400rpx;

}

.pro_price {
	font-size: 32rpx;
	color: #E2231A;
}

.pro_btn {
	position: absolute;
	bottom: 10rpx;
	right: 15rpx;
	width: 160rpx;
	height: 54rpx;
	line-height: 54rpx;
	border-radius: 25rpx;
	text-align: center;
	font-size: 24rpx;
	color: #FFFFFF;
	background: linear-gradient(45deg, #F2473F, #F26E2F);
}

.orderdetail_btn {
	width: 180rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 25rpx;
	text-align: center;
	font-size: 24rpx;
	color: #FFFFFF;
	background-color: #FF6633;
	margin-left: 270rpx;
	margin-top: 20rpx;
}

.ord_btn {
	position: absolute;
	bottom: 20rpx;
	right: 15rpx;
	width: 180rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 25rpx;
	text-align: center;
	font-size: 24rpx;
	color: #FFFFFF;
	background-color: #FF6633;
}

.close_pro {
	position: absolute;
	top: 12rpx;
	right: 15rpx;
}

.product_item {
	width: 400rpx;
	height: 200rpx;
}

.product_txtitem {
	display: flex;
	width: 550rpx;
	/* height: 150rpx; */
}

.pro_txtname {
	font-size: 28rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	margin-bottom: 50rpx;
}

.my_content.my_text_content {
	/* height: 100%; */
	background: linear-gradient(45deg, #F2473F, #F26E2F);
	max-width: 430rpx;
	color: #FFFFFF;
	border-radius: 25rpx 25rpx 0rpx 25rpx;
}

.you_text_content {
	/* height: 100%; */
	max-width: 430rpx;
}

.my_date {
	color: #cccccc;
	font-size: 24rpx;
	position: absolute;
	top: -10rpx;
}

.im_text .my_date {
	right: 100rpx;
}

.sendpro_price {
	position: absolute;
	bottom: 10rpx;
}

.sendord_price {
	position: absolute;
	bottom: 40px;
}

.upload_box {
	/* width: 50rpx; */
	height: 75rpx;
	display: flex;
	align-items: center;
	margin-left: 20rpx;
	justify-content: space-around;
	flex: 1;
}
</style>
